<template>
  <el-container>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>批发市场基本信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>商铺信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-header style="height: auto;">
      <el-form inline>
        <el-form-item label="商铺编号" size="mini">
          <el-input placeholder="商铺编号"></el-input>
        </el-form-item>
        <el-form-item label="商铺面积" size="mini">
          <el-input placeholder="商铺面积"></el-input>
        </el-form-item>
        <el-form-item label="当前状态" size="mini">
          <el-select placeholder="当前状态" value="全部">
            <el-option value="租赁中" />
            <el-option value="未租赁" />
          </el-select>
        </el-form-item>
        <el-form-item label="承租人姓名" size="mini">
          <el-input placeholder="承租人姓名"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" size="mini">
          <el-input placeholder="联系电话"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" size="mini">
          <el-input placeholder="身份证号"></el-input>
        </el-form-item>
        <el-form-item label="签约期限" size="mini">
          <el-date-picker
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item size="mini">
          <el-button icon="el-icon-search" type="primary">查询</el-button>
          <el-button icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-row style="float: right; margin-bottom: 10px;">
        <el-button icon="el-icon-plus" size="mini" type="primary">新增</el-button>
        <el-button icon="el-icon-delete" size="mini" type="danger">删除</el-button>
        <el-button icon="el-icon-download" size="mini" type="warning">导出</el-button>
      </el-row>
      <el-table :cell-style="{ textAlign: 'center' }" :data="tableData"
                :header-cell-style="{ backgroundColor: '#f7f8fa', textAlign: 'center' }" size="mini">
        <el-table-column type="selection" />
        <el-table-column label="序号" prop="id" />
        <el-table-column label="商铺" prop="code" />
        <el-table-column label="商铺面积" prop="area" />
        <el-table-column label="当前状态" prop="status">
          <template slot-scope="scope">
            <div style="width: 100%; display: flex; justify-content: center; align-items: center;">
              <div style="width: 10px; height: 10px; border-radius: 50%; margin-right: 5px;"
                   :style="{
                     backgroundColor: scope.row.status ? 'red' : '#57aa4d'
                   }"></div>
              <div v-html="scope.row.status ? '未租赁' : '租赁中'"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="承租人" prop="responser" />
        <el-table-column label="身份证号" prop="personCode" />
        <el-table-column label="联系电话" prop="tel" />
        <el-table-column label="签约期限" prop="time" />
        <el-table-column label="租金价格" prop="money" />
        <el-table-column label="经营品牌" prop="brand" />
        <el-table-column label="经营范围" prop="zone" />
        <el-table-column label="雇员人数" prop="people" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit" title="编辑" type="text"></el-button>
            <el-button icon="el-icon-circle-plus-outline" title="新增" type="text"></el-button>
            <el-button icon="el-icon-delete" style="color: red" title="删除" type="text"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :total="3" layout="total, sizes, prev, pager, next, jumper" />
    </el-main>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        id: '1',
        code: 'II001',
        area: 30,
        status: false,
        responser: '周乐心',
        personCode: '37233019970222465X',
        tel: '19333312231',
        time: '2030/6/12',
        money: '1000',
        brand: '金锣',
        zone: '猪肉',
        people: 3
      },
        {
          id: '2',
          code: 'II002',
          area: 20,
          status: true,
          responser: '李赫',
          personCode: '372330199702224651',
          tel: '19113212388',
          time: '2030/6/12',
          money: '2000',
          brand: '雨润',
          zone: '猪肉',
          people: 5
        },
        {
          id: '3',
          code: 'II003',
          area: 30,
          status: false,
          responser: '胡小小',
          personCode: '372330199702224652',
          tel: '19533319000',
          time: '2030/6/12',
          money: '3000',
          brand: '六合',
          zone: '鸡肉',
          people: 2
        }
      ]
    }
  }
}
</script>

<style scoped>
.el-breadcrumb {
  margin: 5px;
}

.el-container {
  background-color: #eef3fa;
  height: 100%;
  padding: 10px;
}

/* .el-form-item--mini.el-form-item {
margin-bottom: 0;
} */
.el-header {
  background-color: white;
  margin: 10px 0;
  padding: 15px 30px;
}

.el-main {
  background-color: white;
}

.el-pagination {
  margin-top: 10px;
  text-align: right;
}
</style>
